<template>
    <div class="leftOne">
        <ThemeTitle :title="title"/>
        <div class="landArea">
            <div class="landIcon">
                <img src="/data/images/hngk/ceng.png" alt="">
            </div>
            <div class="landDetail">
                <div class="title">陆地总面积</div>
                <div class="num">
                    <div class="" v-for="(item,index) in numList" :key="index">
                        {{item}}
                    </div>
                    <div>㎡</div>
                </div>
            </div>
        </div> 
        <div class="islandAndSea">
            <div class="islandArea" v-for="(item,index) in islandList" :key="index">
                <div class="landName">{{item.name}}</div>
                <div class="landVal" :class="{'yColor':index%2==0,'rColor':index%2!==0}">{{item.val}}</div>
            </div>   
            <!-- <div class="seaArea">
                <div class="seaName">海域面积</div>
                <div class="seaVal">53,114㎡</div>
            </div> -->
        </div>         
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">地理介绍</div>
            </div>
            <div class="geoCarousel">
                <el-carousel trigger="click" height="165px"  indicator-position="outside">
                    <el-carousel-item v-for="item in carouselList" :key="item">
                        <div class="carouseContent">
                            <div class="carouseImg">
                                <img :src="item.imgSrc" alt="">
                            </div>
                            <div class="carouseWord">
                                {{item.dec}}
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>  
    </div>
</template>

<script>
    import ThemeTitle from "../../common/ThemeTitle"
    import {
        defineComponent,
        getCurrentInstance,
        onMounted,
        ref,
        provide 
    } from 'vue'
    import { useRouter } from 'vue-router'
    export default {
        components: {
            ThemeTitle
        },
        setup(){
            const title = provide("title", "自然地理"); 
            const numList = [
                2,5,1,3,8,0
            ]
            const carouselList = [
                {imgSrc:"/data/images/hngk/haibian.jpg",dec:"海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"/data/images/hngk/haibian.jpg",dec:"北以琼州海峡与广东划界，海南省是中华人民共和国最南端的省级行政区，西临北部湾与广西、越南相对，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"},
                {imgSrc:"/data/images/hngk/haibian.jpg",dec:"西临北部湾与广西、越南相对，海南省是中华人民共和国最南端的省级行政区，北以琼州海峡与广东划界，东濒南海与台湾对望，东南和南部在南海与菲律宾、文莱、马来西亚为邻。"}
            ]
            const islandList = [
                {name:'海南本岛',val:'53,114㎡'},
                {name:'海域面积',val:'53,114㎡'},
                {name:'其他岛屿',val:'53,114㎡'},
                {name:'岸线长度',val:'53,114㎡'}
            ]
            onMounted(()=>{
                
            })
            return {
                numList,
                carouselList,
                title,
                islandList
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../assets/varibles.styl'
  .leftOne
    .landArea
        width:vw(365)
        height:vh(132)
        margin-top:vh(25)
        background: url('/data/images/hngk/bigrec.png') no-repeat
        background-size: 100% 100%
        padding:vh(25) vw(37) vh(28) vw(33)
        display:flex
        align-items :center
        .landIcon
            margin-right:vw(30)
        .landDetail
            width:vw(220)
            .title
                font-size:vw(18)
                cursor: pointer
            .num
                display:flex
                justify-content :space-between
                margin-top:vh(17)
                div 
                    flex-shrink: 0
                    width: vw(29)
                    height: vh(45)
                    line-height:vh(45)
                    font-size:vw(26)
                    background: url('/data/images/hngk/num.png') no-repeat
                    background-size:100% 100%
                    text-align: center
                div:last-child
                    font-size:vw(16)
                    background: none
                    flex-shrink: 0
                    width:vw(18)
    .islandAndSea
        width:vw(364)
        height:vh(100)
        margin-top:vh(17)
        display:flex
        justify-content :space-between
        background: url('/data/images/hngk/littlerec.png') no-repeat
        background-size:100% 100%
        .islandArea
            width:vw(90)
            height:vh(100)
            text-align:center
            .landName
                line-height:vh(50)
                width:100%
                font-size: vw(14)
                cursor: pointer
            .landVal
                line-height:vh(50)
                width:100%
                font-size: vw(19)
            .yColor
                color:#00E5FD
            .rColor
                color:#00E5FD
        // .seaArea
        //     width:vw(172)
        //     height:vh(81)
        //     background: url('/data/images/hngk/littlerec.png') no-repeat
        //     background-size:100% 100%
        //     text-align:center
        //     .seaName
        //         line-height:vh(40)
        //         width:100%
        //         font-size: vw(16)
        //         cursor: pointer
        //     .seaVal
        //         line-height:vh(40)
        //         width:100%
        //         font-size: vw(22)
    .geoIntro
        width:vw(365)
        margin-top:vh(28)
        .geoIntroTitle
            margin-bottom:vh(13)
            display:flex
            .sideLine
                width:vw(2)
                height:vh(15)
                margin-right:vw(10)
                background: #86ceeb
            .geoIntroWord
                color:#00EAFF
                font-size:vw(16)
        .geoCarousel
            width: vw(365)
            height: vh(172)
            border: 1px solid #0c4259;
            padding-top:vh(8)
            padding-left:vw(8)
            .carouseContent
                display:flex
                .carouseImg 
                    flex-shrink:0 
                    width:vw(163)
                    height:vh(135)  
                    margin-right:vw(12)  
                    img
                        width:vw(163)
                        height:vh(135)  
                .carouseWord
                    flex-shrink:0 
                    width:vw(168)
                    height:vh(139)  
                    padding:vh(12) vw(0)
                    line-height:vh(17)
</style>